<template>
	<div id="space">
		<div class="space-bg">
			<template v-for="item of userList">
				<div class="space-crumbs i_maxW">
					<router-link to="/teach">名师中心</router-link>
					<span><i>></i>{{item.name}} </span>
				</div>

				<div class="space-user i_maxW clear">
					<div class="space-user-portrait fl">
						<img :src="BASE_URL + item.avatar_path">
					</div>
					<div class="space-user-info">
						<div class="space-user-info-op clear">
							<div class="space-user-info-op-l fl">
								<span>{{item.name}}</span>
								<span v-if="item.sub_name !== '暂未绑定科目' ">{{item.sub_name}}</span>
								<!-- <span>{{item.role_name}}</span> -->
								<template v-if="!multi">
									<span class="space-class" v-for="rename of item.class" :key="rename.id">{{rename.name}}</span>
								</template>
								
							</div>
							<div class="space-user-info-op-r fr" v-if="item.id != $g.user_id">
								<template>
									<button v-preventReClick="3000" @click="getFollow(item.id, 'del')" v-if="item.is_relation === 1" class="is_follow">
										<i class="ipng but_Collection01_down" ></i>
										<em>已关注</em>
									</button>
									<button v-preventReClick="3000" @click="getFollow(item.id, 'add')" v-else><i class="ipng but_Collection01_up" ></i><em>加关注</em></button>
									
								</template>
								<span class="is_follow" @click="parent(item, 2)">
									<i class="ipng but_chat01_up"></i><em>发私信</em>
								</span>
							</div>

						</div>
						<div class="space-user-info-data">
							<span>粉丝 {{item.relation_num}}</span>
							<span>课程 {{item.video_num}}</span>
							<span>总播放量 {{item.video_click}}</span>
						</div>
					</div>
				</div>
				<div class="space-user-summary i_maxW" >
					<div class="clear">
						<i class="el-icon-menu fl"></i>
						<div v-if="item.autograph">{{item.autograph}}</div>
						<p v-else>这个人或许有些别的想法</p>
					</div>
				</div>
			</template>
		</div>
		<!--  -->
		<div class="space-conten i_maxW clear">
			<div class="space-path fl">
				<el-menu
				:default-active="activeIndex">
					<template v-if="$route.query.id == $g.user_id">
						<el-menu-item index="1">
							<router-link :to="{path: '/teach/space', query: {id: $route.query.id}}">教学视频</router-link>
							<i class="ipng icon_mingshi_shipin"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="2">
							<router-link :to="{path: '/teach/space/resource', query: {id: $route.query.id}}">教学资源</router-link>
							<i class="ipng icon_mingshi_ziyuan"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="3">
							<router-link :to="{path: '/teach/space/journal', query: {id: $route.query.id}}">教学日志</router-link>
							<i class="ipng icon_mingshi_rizhi"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="4">
							<router-link :to="{path: '/teach/space/fans', query: {id: $route.query.id}}">我的粉丝</router-link>
							<i class="ipng icon_mingshi_fenshi"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="5">
							<router-link :to="{path: '/teach/space/follow', query: {id: $route.query.id}}">我的关注</router-link>
							<i class="ipng icon_mingshi_shouchang"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="6">
							<router-link :to="{path: '/teach/space/teachersFiles', query: {id: $route.query.id}}">我的档案</router-link>
							<i class="ipng quanzu_icon01"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
					</template>
					<template v-else>
						<el-menu-item index="1">
							<router-link :to="{path: '/teach/space', query: {id: $route.query.id}}">教学视频</router-link>
							<i class="ipng icon_mingshi_shipin"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="2">
							<router-link :to="{path: '/teach/space/resource', query: {id: $route.query.id}}">教学资源</router-link>
							<i class="ipng icon_mingshi_ziyuan"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="3">
							<router-link :to="{path: '/teach/space/journal', query: {id: $route.query.id}}">教学日志</router-link>
							<i class="ipng icon_mingshi_rizhi"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="4">
							<router-link :to="{path: '/teach/space/fans', query: {id: $route.query.id}}">TA的粉丝</router-link>
							<i class="ipng icon_mingshi_fenshi"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="5">
							<router-link :to="{path: '/teach/space/follow', query: {id: $route.query.id}}">TA的关注</router-link>
							<i class="ipng icon_mingshi_shouchang"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
						<el-menu-item index="6">
							<router-link :to="{path: '/teach/space/teachersFiles', query: {id: $route.query.id}}">TA的档案</router-link>
							<i class="ipng quanzu_icon01"></i>
							<i class="ipng Shape_04"></i>
						</el-menu-item>
					</template>
				</el-menu>
			</div>
			<div class="space-template">
				   <router-view />
			</div>
		</div>
		<chat  ref="child"></chat>
	</div>
</template>

<script>
	import chat from '@/components/common/chat';
	export default {
		components: {chat},
		data(){
			return {
				activeIndex: '1',
				userList: null,
				link_id: this.$route.query.id,
				user_multistage:   this.$store.state.userInfo === null ? false :  this.$store.state.userInfo.is_level,
				is_newlogin:  is_empty(this.$store.state.userInfo) ? false : true,
			}
		},
		created(){
			console.log(this.$g)
		},
		mounted(){
			this.$nextTick(function () {
				this.userInfo()
				this.pageRefresh();
			})
        },
        computed: {
          multi(){
              return this.$store.state.isMulti && !this.$store.state.isSchool;
          }  
        },
		destoryed() {
		    this.$destroy(chat)
		},
		watch: {
			$route: {
				handler(a, b){
					if (a.query.id !== b.query.id) {
						this.userInfo()
					}
				},
				deep: true
			},

		},
		methods: {
			// 页面刷新，重置activeIndex的值，让左侧菜单选中状态和右侧的内容对应
			pageRefresh(){
				const paths = ['/teach/space','/teach/space/resource','/teach/space/journal','/teach/space/fans','/teach/space/follow']
				const inx = paths.findIndex(path => path === this.$route.path);
				this.activeIndex = (inx + 1) + '';
			},
			parent(obj, type){
				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				
				if (obj.id == this.$g.user_id || obj.user_id == this.$g.user_id) {
					this.$message.warning('不能跟自己通讯哦~')
					return
				}
				console.log(obj,12);
				this.$refs.child.getUserChatOne(obj, type)
			},
			userInfo(){
				let success = (res =>{
					this.userList = res.data;
                })
                let fail = (res =>{
                    this.$route.push('/teach');
                })
				this.$ajax({
					url: 'api/user/user',
					method: 'get',
					params: {
						id: this.$route.query.id,
						userid: this.$g.user_id,
						is_diffplat: 1
					},
					func: {success: success,fail: fail}
				})

			},
			getFollow(id, type){

				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				let success = ( res =>{
					this.$message.success(res.msg);
					this.userInfo()
				});
				let state = ''
				if (type == 'add') {
					state = 'add'
				}else{
					state = 'del'
				}

				this.$ajax({
					url: 'api/user/bind_relation',
					method: 'post',
					data: {
						user_id: this.$g.user_id,
						follow_id: id,
						add_delete: state,
						type: 0
					},
					func: {
						success: success
					}
				})
			},
		}
	}
</script>
